/* 扩散环 */
.breathe1 {
	animation: breathe1 1.8s linear infinite;
}

@-webkit-keyframes breathe1 {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	30% {
		opacity: 0.4;
		transform: scale(1.2);
	}

	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}


/* 呼吸灯 */
.glow {
	animation: glow 1s linear infinite alternate;
}

@keyframes glow {
	0% {
		border-color: rgba(227, 192, 28, .61);
		box-shadow: 0 0 5rpx #E3C01C, inset 0 0 5rpx #E3C01C, 0 0px 0 rgba(227, 192, 28, .3);
	}

	100% {
		border-color: rgba(227, 192, 28, .61);
		box-shadow: 0 0 25rpx #E3C01C, inset 0 0 10rpx #E3C01C, 0 0 0 rgba(227, 192, 28, .3);
	}
}


.rotate {
	animation: rotate 9s infinite linear;
}

.rotate-reverse {
	animation: rotate2 9s infinite linear reverse;
}

/* 旋转 */
@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


/* 旋转2 */
@keyframes rotate2 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


.rotate-scale {
	animation: rotate3 9s infinite linear;
}

/* 旋转放大 */
@keyframes rotate3 {
	0% {
		transform: scale(1) rotate(0deg);
	}

	49% {
		transform: scale(1.2) rotate(360deg);
	}

	50% {
		transform: scale(1) rotate(360deg);
	}

	99% {
		transform: scale(1.2) rotate(0deg);
	}

	100% {
		transform: scale(1) rotate(0deg);
	}
}

.bounce-down {
	animation: bounce-down 3s linear infinite;
}

@-webkit-keyframes bounce-down {
	25% {
		-webkit-transform: translateY(-10rpx);
	}

	50%,
	100% {
		-webkit-transform: translateY(0);
	}

	75% {
		-webkit-transform: translateY(10rpx);
	}
}




.shake {
	display: inline-block;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-animation-name: shake-base;
	-ms-animation-name: shake-base;
	animation-name: shake-base;
	-webkit-animation-duration: 2000ms;
	-ms-animation-duration: 2000ms;
	animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-play-state: running;
	-ms-animation-play-state: running;
	animation-play-state: running;
}

@-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 2% { transform: translate(-0.5rpx, 0.5rpx) rotate(-0.5deg); }
 4% { transform: translate(-2.5rpx, -1.5rpx) rotate(0.5deg); }
 6% { transform: translate(1.5rpx, 1.5rpx) rotate(-1.5deg); }
 8% { transform: translate(-1.5rpx, -2.5rpx) rotate(0.5deg); }
 10% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
 12% { transform: translate(-1.5rpx, 1.5rpx) rotate(-1.5deg); }
 14% { transform: translate(-1.5rpx, 0.5rpx) rotate(0.5deg); }
 16% { transform: translate(0.5rpx, 0.5rpx) rotate(-0.5deg); }
 18% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
 20% { transform: translate(-2.5rpx, 0.5rpx) rotate(-1.5deg); }
 22% { transform: translate(1.5rpx, 0.5rpx) rotate(-0.5deg); }
 24% { transform: translate(-0.5rpx, -1.5rpx) rotate(-0.5deg); }
 26% { transform: translate(-1.5rpx, 1.5rpx) rotate(0.5deg); }
 28% { transform: translate(-1.5rpx, -0.5rpx) rotate(0.5deg); }
 30% { transform: translate(-2.5rpx, 0.5rpx) rotate(0.5deg); }
 32% { transform: translate(1.5rpx, -0.5rpx) rotate(-0.5deg); }
 34% { transform: translate(0.5rpx, -2.5rpx) rotate(-1.5deg); }
 36% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
 38% { transform: translate(-2.5rpx, -0.5rpx) rotate(0.5deg); }
 40% { transform: translate(-0.5rpx, 1.5rpx) rotate(0.5deg); }
 42% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
 44% { transform: translate(-2.5rpx, -2.5rpx) rotate(0.5deg); }
 46% { transform: translate(0.5rpx, -2.5rpx) rotate(0.5deg); }
 48% { transform: translate(-0.5rpx, -2.5rpx) rotate(-0.5deg); }
 50% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
 100% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
  }

@-ms-keyframes shake-base { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
2% { transform: translate(-0.5rpx, 0.5rpx) rotate(-0.5deg); }
  4% { transform: translate(-2.5rpx, -1.5rpx) rotate(0.5deg); }
  6% { transform: translate(1.5rpx, 1.5rpx) rotate(-1.5deg); }
  8% { transform: translate(-1.5rpx, -2.5rpx) rotate(0.5deg); }
  10% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
  12% { transform: translate(-1.5rpx, 1.5rpx) rotate(-1.5deg); }
  14% { transform: translate(-1.5rpx, 0.5rpx) rotate(0.5deg); }
  16% { transform: translate(0.5rpx, 0.5rpx) rotate(-0.5deg); }
  18% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
  20% { transform: translate(-2.5rpx, 0.5rpx) rotate(-1.5deg); }
  22% { transform: translate(1.5rpx, 0.5rpx) rotate(-0.5deg); }
  24% { transform: translate(-0.5rpx, -1.5rpx) rotate(-0.5deg); }
  26% { transform: translate(-1.5rpx, 1.5rpx) rotate(0.5deg); }
  28% { transform: translate(-1.5rpx, -0.5rpx) rotate(0.5deg); }
  30% { transform: translate(-2.5rpx, 0.5rpx) rotate(0.5deg); }
  32% { transform: translate(1.5rpx, -0.5rpx) rotate(-0.5deg); }
  34% { transform: translate(0.5rpx, -2.5rpx) rotate(-1.5deg); }
  36% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
  38% { transform: translate(-2.5rpx, -0.5rpx) rotate(0.5deg); }
  40% { transform: translate(-0.5rpx, 1.5rpx) rotate(0.5deg); }
  42% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
  44% { transform: translate(-2.5rpx, -2.5rpx) rotate(0.5deg); }
  46% { transform: translate(0.5rpx, -2.5rpx) rotate(0.5deg); }
  48% { transform: translate(-0.5rpx, -2.5rpx) rotate(-0.5deg); }
  50% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
  100% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
  }

@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-0.5rpx, 0.5rpx) rotate(-0.5deg); }
  4% { transform: translate(-2.5rpx, -1.5rpx) rotate(0.5deg); }
  6% { transform: translate(1.5rpx, 1.5rpx) rotate(-1.5deg); }
  8% { transform: translate(-1.5rpx, -2.5rpx) rotate(0.5deg); }
  10% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
  12% { transform: translate(-1.5rpx, 1.5rpx) rotate(-1.5deg); }
  14% { transform: translate(-1.5rpx, 0.5rpx) rotate(0.5deg); }
  16% { transform: translate(0.5rpx, 0.5rpx) rotate(-0.5deg); }
  18% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
  20% { transform: translate(-2.5rpx, 0.5rpx) rotate(-1.5deg); }
  22% { transform: translate(1.5rpx, 0.5rpx) rotate(-0.5deg); }
  24% { transform: translate(-0.5rpx, -1.5rpx) rotate(-0.5deg); }
  26% { transform: translate(-1.5rpx, 1.5rpx) rotate(0.5deg); }
  28% { transform: translate(-1.5rpx, -0.5rpx) rotate(0.5deg); }
  30% { transform: translate(-2.5rpx, 0.5rpx) rotate(0.5deg); }
  32% { transform: translate(1.5rpx, -0.5rpx) rotate(-0.5deg); }
  34% { transform: translate(0.5rpx, -2.5rpx) rotate(-1.5deg); }
  36% { transform: translate(0.5rpx, -2.5rpx) rotate(-0.5deg); }
  38% { transform: translate(-2.5rpx, -0.5rpx) rotate(0.5deg); }
  40% { transform: translate(-0.5rpx, 1.5rpx) rotate(0.5deg); }
  42% { transform: translate(1.5rpx, 1.5rpx) rotate(-0.5deg); }
  44% { transform: translate(-2.5rpx, -2.5rpx) rotate(0.5deg); }
  46% { transform: translate(0.5rpx, -2.5rpx) rotate(0.5deg); }
  48% { transform: translate(-0.5rpx, -2.5rpx) rotate(-0.5deg); }
  50% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
  100% { transform: translate(-0.5rpx, 0.5rpx) rotate(0.5deg); }
  }
// 消息闪烁效果
.animImage {
    -webkit-animation-name: imageAnim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease;
    -webkit-animation-play-state: running;
}

@-webkit-keyframes imageAnim{
    0% {opacity: 1;}
    // 50% {opacity: 0.5;}
    100% {opacity: 0;}
}

// 摇铃效果
.rotate10 {
  display: block;
  animation: rotate10  0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
  
@keyframes rotate10{
  0%{
    transform: rotateZ(0deg);/*从0度开始*/
  }
  25%{
    transform: rotateZ(20deg);
  }
  50%{
    transform: rotateZ(0deg);
  }
  75%{
    transform: rotateZ(-20deg);
  }
  100%{
    transform: rotateZ(0deg);
  }
}


// 抖动
@keyframes shake {
 10%,

  90% {
    transform: translate3d(-1px, 0 0);

  }

  20%,

  80% {
    transform: translate3d(2px, 0, 0);

  }

  30%,

  50%,

  70% {
    transform: translate3d(-4px, 0, 0);

  }

  40%,

  60% {
    transform: translate3d(4px, 0, 0);

  }

}
.apply-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

}

// 消息闪烁效果
.animImage {
    -webkit-animation-name: imageAnim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease;
    -webkit-animation-play-state: running;
}

@-webkit-keyframes imageAnim{
    0% {opacity: 1;}
    // 50% {opacity: 0.5;}
    100% {opacity: 0;}
}

/*// 抖动*/
.cake {
  animation: move 3s 0s infinite;
  -webkit-animation: move 3s 0s infinite;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  display: block;
}
@keyframes move {

  0%,
  65% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  70% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  75% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  80% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  85% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  90% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  95% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes move {

  0%,
  65% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  70% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  75% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  80% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  85% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  90% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  95% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}